<script>
    $(function () {
        var a = $, tpl = layui.laytpl, f = layui.form, box = a('.spec-box'),
            util = layui.util, ly = layui.layer, tplSpec = '<?php echo !empty($info) ? $info->spec:"";?>',
            spec = tplSpec ? JSON.parse(tplSpec) : [];

        renderSpec();

        util.on('lay-on', {
            add: function () {
                a('.add-spec-item').css('display', 'block');
                a(this).hide();
            },
            clare: function () {
                a('.add-spec-item').hide();
                a('.add-spec-btn').show();
                a('#spec-title').val('');
                a('#spec-val').val('');
            },
            addOk: function () {
                let title = a('#spec-title').val(), val = a('#spec-val').val(), open = true;
                if (title && val) {
                    spec.forEach(function (v, i) {
                        if (v.title === title) {
                            open = false;
                        }
                    })
                    if (open) {
                        spec.push({
                            id: a.now(),
                            title: title,
                            child: [
                                {id: a.now() + 1, title: val},
                            ]
                        });
                        renderSpec();
                        a('.add-spec-item').hide();
                        a('.add-spec-btn').show();
                        a('#spec-title').val('');
                        a('#spec-val').val('');
                    } else {
                        ly.msg('规格名已存在，请修改或者完善对应规格属性');
                    }
                } else {
                    ly.msg('请填写完整规格');
                }
            },

        });

        function renderSpec() {
            tpl(a('#spec').html()).render({spec: spec}, function (html) {
                box.html(html);
                f.render()
            });
        }

        function removeSpec(id, type) {
            if (type === 1) {
                spec.forEach(function (item, index) {
                    if (parseInt(item.id) === id) {
                        spec.splice(index, 1);
                        return false;
                    }
                });
            } else {
                spec.forEach(function (i, k) {
                    i.child.forEach(function (item, index) {
                        if (parseInt(item.id) === id) {
                            i.child.splice(index, 1);
                            return false;
                        }
                    });
                });
            }
            renderSpec();
        }

        box.on('click', '.close-item', function () {
            removeSpec(parseInt(a(this).attr('data-id')), 1);
        }).on('click', '.close-child', function () {
            removeSpec(parseInt(a(this).attr('data-id')), 2);
        }).on('click', '.add-spec-item-child', function () {
            const text = a(this).parent().find('.attribute').val(), id = parseInt(a(this).attr('data-id'));
            if (text) {
                spec.forEach(function (item, index) {
                    if (parseInt(item.id) === id) {
                        let open = true;
                        item.child.forEach(function (v, i) {
                            if (v.title === a.trim(text)) {
                                open = false;
                            }
                        })
                        if (open) {
                            item.child.push(
                                {id: a.now(), title: a.trim(text)}
                            );
                        } else {
                            ly.msg('属性已存在');
                        }
                    }
                });
                renderSpec();
            } else {
                ly.msg('请添加属性');
            }
        });
        f.on('submit(saveSpec)', function (data) {
            var title = a("#title").val(),btn = $(this),back_url = btn.attr('data-back-url');
            if (!title) {
                ly.msg('请填写规格模板名称');
                a("#title").focus()
                return false;
            }
            if (spec.length <= 0) {
                ly.msg('请添加商品规格');
                return false;
            }
            btn.attr('disabled', true);
            layerLoad()
            a.post("{:url('save')}", {title: title, spec: spec, id: "{$info?$info.id:''}"}, function (d) {
                if (d.code === 1) {
                    ly.msg(d.msg, {time: 1000}, function () {
                        parent.layer.closeAll();
                        if(!a("#back").val()){
                            if(back_url){
                                location.href = back_url;
                            }else{
                                if (parent.$(".layui-table-page").length > 0) {
                                    parent.layui.table.reload('form_table', {
                                        page: {
                                            curr: parent.$(".layui-laypage-em").next().text()
                                        },
                                    });
                                } else {
                                    var w = window.frames.frameElement.id.includes('layui-layer-iframe');
                                    w ? parent.location.reload() : location.reload();
                                }
                            }

                        }
                    })

                } else {
                    ly.msg(d.msg);
                }
            });

            return false;
        });
    })

</script>